<script setup lang="tsx">
import { ref, watch } from 'vue';
import { useProjectStore } from '@/store/modules/project';
import {
  farmLabelCreateApi,
  farmLabelDeleteApi,
  farmLabelEditApi,
  getFarmLabelListApi
} from '@/service/api/businessApi';
const projectStore = useProjectStore();

const drawerVisible = defineModel<boolean>('visible', {
  default: false
});

const dataSource = ref([]);

const handleDelete = (id: any) => {
  farmLabelDeleteApi(id).then((res: any) => {
    if (res.error === null) {
      window.$message?.success('删除成功');
      getLabelList();
    }
  });
};
const handleSubmit = () => {
  if (currentEditId.value) {
    edit();
  } else {
    add();
  }
};

const showEditModal = (id: any, name: string) => {
  currentEditId.value = id;
  modalValue.value = name;
  modalVisible.value = true;
};
const edit = () => {
  farmLabelEditApi({
    label: modalValue.value,
    id: currentEditId.value,
    projectId
  }).then((res: any) => {
    if (res.error === null) {
      modalClose();
      window.$message?.success('修改成功');
      getLabelList();
    }
  });
};
const add = () => {
  farmLabelCreateApi({
    label: modalValue.value,
    projectId
  }).then((res: any) => {
    if (res.error === null) {
      modalClose();
      window.$message?.success('新增成功');
      getLabelList();
    }
  });
};

/* 新增弹出框的逻辑 */
const modalVisible = ref(false);
const currentEditId = ref();
const modalValue = ref();
const modalClose = () => {
  modalVisible.value = false;
  currentEditId.value = '';
  modalValue.value = '';
};
/* 新增逻辑 */

const columns: any = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 60,
    customRender: ({ index }: any) => {
      return `${index + 1}`;
    }
  },
  {
    title: '名称',
    dataIndex: 'label',
    key: 'label'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 150,
    customRender: ({ record }: any) => (
      <div class="flex-center gap-8px">
        <a-button type="primary" ghost size="small" onClick={() => showEditModal(record.id, record.label)}>
          编辑
        </a-button>
        <a-popconfirm title="确认删除吗？" onConfirm={() => handleDelete(record.id)}>
          <a-button danger size="small">
            删除
          </a-button>
        </a-popconfirm>
      </div>
    )
  }
]);

/* region ====== 接口相关 start */
const projectId = projectStore.currentProject?.id;

const getLabelList = () => {
  getFarmLabelListApi({
    projectId
  }).then(res => {
    if (res.data) {
      dataSource.value = res.data.data;
    }
  });
};

watch(drawerVisible, () => {
  if (drawerVisible.value) {
    getLabelList();
  }
});
/* endregion === 接口相关 end */
</script>

<template>
  <ADrawer
    v-model:open="drawerVisible"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    width="500"
    title="分类管理"
    placement="right"
  >
    <ATable :data-source="dataSource" :columns="columns" :pagination="false" />

    <template #footer>
      <div class="text-right">
        <AButton class="w-100px" type="primary" @click="modalVisible = true">新增</AButton>
      </div>
    </template>
  </ADrawer>

  <AModal v-model:open="modalVisible" title="分类" :after-close="modalClose" @ok="handleSubmit">
    <div class="pb-20px pt-20px">
      <AInput v-model:value="modalValue" placeholder="请输入分类"></AInput>
    </div>
  </AModal>
</template>

<style scoped></style>
